<template>
  <textarea :id="props.id" ref="editorRef" name="editor"></textarea>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import "jodit/es2021/jodit.min.css";
import { Jodit } from "jodit/es2021/jodit.min.js";

let editorRef = ref(null);
const props = defineProps({
  modelValue: String,
  config: { type: Object, default: () => ({}) },
  id: { type: String, default: "editorRef" },
});
const emit = defineEmits(["update:modelValue"]);

let editorInstance; //创建示例

let config = {
  theme: "default", //主题：默认default，暗色dark
  placeholder: "请输入内容...",
  zIndex: 10,
  language: "zh_cn",
  width: "100%",
  height: "100%",
  minHeight: 400,
  saveModeInCookie: false,
  toolbarSticky: false, //工具栏设置sticky
  statusbar: false, //底部状态栏(左：html元素；右：单词数，字符数统计)
  theme: "default", //主题模式 还可以设置为dark
  height: 250,
  image: {
    //图片相关配置
    editSrc: false,
    editStyle: false,
    useImageEditor: false,
  },
  link: {
    noFollowCheckbox: false,
    modeClassName: "",
  },
  i18n: {
    zh_cn: {
      top: "上",
      right: "右",
      bottom: "下",
      left: "左",
      Title: "标题",
      Link: "链接",
      "Line height": "行高",
      Alternative: "描述",
      "Alternative text": "描述",
      "Lower Alpha": "小写英文字母",
      "Lower Greek": "小写希腊字母",
      "Lower Roman": "小写罗马数字",
      "Upper Alpha": "大写英文字母",
      "Upper Roman": "大写罗马数字",
    },
  },
  createAttributes: {
    blockquote: {
      style: `
      display: block;
      padding: 16px;
      margin: 0 0 24px;
      border-left: 8px solid #dddfe4;
      background: #eef0f4;
      color: rgba(0, 0, 0, 0.5);
      overflow: auto;
      word-break: break-word !important;`,
      class: "blockquote-box", //在css中编写类名对应的样式
    },
  },
  sourceEditorCDNUrlsJS: [
    // "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js",
    "https://cdn.staticfile.org/ace/1.4.2/ace.js",
  ],
  beautifyHTMLCDNUrlsJS: [
    "https://cdn.staticfile.org/js-beautify/1.14.4/beautifier.min.js",
    "https://cdn.staticfile.org/js-beautify/1.14.4/beautify-html.min.js",
  ],

  //disablePlugins: "stat", //要禁用的插件，以逗号分割。stat是底部字符数与单词数统计
  buttons:
    "source,bold,italic,underline,strikethrough,eraser,superscript,subscript,ul,ol,indent,outdent,left,center,right,font,fontsize,paragraph,brush,lineHeight,image,file,video,copyformat,selectall,hr,table,link,symbols,undo,redo,fullsize,preview",
  controls: {
    font: {
      list: Jodit.atom({
        "Microsoft YaHei": "微软雅黑",
        KaiTi: "楷体",
        方正喵呜体: "方正喵呜体",
        "思源宋体 Heavy": "思源宋体",
        SimHei: "黑体",
        NSimSun: "新宋体",
        华文行楷: "华文行楷",
      }),
    },
  },
  uploader: {
    url: import.meta.env.VITE_APP_BASEURL + "/common/upload", //上传地址
    filesVariableName: function (i) {
      return "file";
    },
    isSuccess(res) {
      return res;
    },
    defaultHandlerSuccess(data) {
      //此处参数的值默认是接口返回的data值
      console.log("defaultHandlerSuccess", data);
      this.s.insertImage(data.fullurl); //将图片插入编辑器中，不可省略
    },
    process: function (resp) {
      return resp;
    },
    defaultHandlerError(err) {
      console.log("defaultHandlerError", err);
      this.jodit.events.fire("errorMessage", err);
    },
    error(err) {
      console.log("error", err);
      this.jodit.events.fire("errorMessage", "文件上传失败");
    },
  },
};
onMounted(() => {
  editorInstance = Jodit.make("#" + props.id.toString(), { ...config }); //合并组件传入的配置项并创建实例
  editorInstance.value = props.modelValue;
  editorInstance.events.on("change", (newValue) => {
    emit("update:modelValue", newValue);
  });
});
onBeforeUnmount(() => {
  editorInstance.destruct(); //组件销毁
  editorInstance = null;
});
watch(
  () => props.modelValue,
  (newValue) => {
    if (editorInstance.value !== newValue) {
      editorInstance.value = newValue;
    }
  }
);
</script>

<style lang="scss">
.jodit-checkbox,
.jodit-ui-checkbox__input {
  appearance: checkbox;
  -webkit-appearance: checkbox;
}
.jodit .jodit-input {
  color: #666;
}
.jodit-ui-button_variant_primary {
  background-color: #409eff;
}
.jodit-ui-button_variant_primary:hover:not([disabled]) {
  background-color: #cccccc;
}
// .jodit-container {
// blockquote-box {
//   display: block;
//   padding: 16px;
//   margin: 0 0 24px;
//   border-left: 8px solid #dddfe4;
//   background: #eef0f4;
//   color: rgba(0, 0, 0, 0.5);
//   overflow: auto;
//   word-break: break-word !important;
// }
// }
.jodit-workplace {
  ol,
  ul,
  li {
    list-style-position: inside;
  }
  p{
    line-height: 20px;
    margin: 5px 0;
  }
}
</style>
